<template>
  <div class="div">
    <el-row>
      <el-row>
        <h3 style="color: red;text-align: center;font-size: 30px">注册成功,补全信息即可使用平台服务</h3>
      </el-row>
      <el-row>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="公司名称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="负责人姓名" prop="corporation">
            <el-input v-model="ruleForm.corporation"></el-input>
          </el-form-item>
          <el-form-item label="身份证号" prop="certNum">
            <el-input v-model="ruleForm.certNum"></el-input>
          </el-form-item>
          <el-form-item label="身份证照片" prop="certPicture">
            <el-row>
              <el-col :span="8">
                <el-upload
                  class="avatar-uploader"
                  action="http://localhost/dev-api/business/business/upload"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
                  <img v-if="ruleForm.certPicture" :src="ruleForm.certPicture" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-col>
              <el-col :span="8">
                <el-upload
                  class="avatar-uploader"
                  action="http://localhost/dev-api/business/business/upload"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess2"
                  :before-upload="beforeAvatarUpload">
                  <img v-if="ruleForm.certPicture2" :src="ruleForm.certPicture2" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-col>
              <el-col :span="8">
                <el-upload
                  class="avatar-uploader"
                  action="http://localhost/dev-api/business/business/upload"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess3"
                  :before-upload="beforeAvatarUpload">
                  <img v-if="ruleForm.certPicture3" :src="ruleForm.certPicture3" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="营业执照" prop="url">
            <el-upload
              class="avatar-uploader"
              action="http://localhost/dev-api/business/business/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess4"
              :before-upload="beforeAvatarUpload">
              <img v-if="ruleForm.url" :src="ruleForm.url" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="办公地址" prop="cityList">
            <el-cascader
              v-model="ruleForm.cityList"
              :options="options"
              :props="{ expandTrigger: 'hover' }"
              @change="handleChange"></el-cascader>
          </el-form-item>
          <el-form-item prop="address">
            <el-input v-model="ruleForm.address" placeholder="请输入详细地址"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary"style="width:100%;" @click="submit('ruleForm')">提交</el-button>
          </el-form-item>
        </el-form>

      </el-row>
    </el-row>
  </div>
</template>

<script>
import {getCityList,addBusiness} from "@/api/system/business";
import { v4 as uuidv4 } from 'uuid';
uuidv4();
import axios from 'axios'
export default {
  name: "Add_business",
  data(){
    return{
      ruleForm:{
        certPicture:'',
        certPicture2:'',
        certPicture3:'',
        url:'',
        cityList:[],
      },
      options:[],

      rules:{
        name:[
          { required: true, message: '请输入公司名称', trigger: 'blur' },
        ],
        corporation:[
          { required: true, message: '请输入负责人姓名', trigger: 'blur' },
        ],
        certNum:[
          { required: true, message: '请输入身份号', trigger: 'blur' },
        ],
        certPicture:[
          { required: true, message: '请上传身份证照片', trigger: 'blur' },
        ],
        url:[
          { required: true, message: '请上传营业执照', trigger: 'blur' },
        ],
        value:[
          { required: true, message: '请选择地址', trigger: 'blur' },
        ],
        address:[
          { required: true, message: '请输入详细地址', trigger: 'blur' },
        ]
      },
    }
  },
  methods:{
    handleChange(value) {
      this.ruleForm.province=value[0];
      this.ruleForm.city=value[1];
      this.ruleForm.county=value[2];
      this.value=value;
      console.log(value);
    },
    getCityList(){
      getCityList().then(response=>{
        console.log(response);
        this.options=response.data;
      })
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      console.log(res.data);
      this.ruleForm.certPicture=res.data.data.url;
    },
    handleAvatarSuccess2(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.ruleForm.certPicture2=res.data.data.url;

    },
    handleAvatarSuccess3(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.ruleForm.certPicture3=res.data.data.url;

    },
    handleAvatarSuccess4(res, file){
      this.imageUrl = URL.createObjectURL(file.raw);
      this.ruleForm.url=res.data.data.url;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    submit(ruleForm){
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          this.ruleForm.uuid=uuidv4();
          addBusiness(this.ruleForm).then(response=>{
            if(response.code==200){
              this.$message.success("完善信息成功");
              this.$router.push("/login");
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  },
  created() {
    this.getCityList();
  }
}
</script>

<style scoped>
.div{
  display: flex;
  justify-content: center;
  height: 100%;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
